<template>
    <div class="meteorologicalenvironmentmsg">
        <pagetitle></pagetitle>
        <el-form :model="pageData" class="demo-form-inline" label-width="160px" :disabled="$route.query.join ? true : false">
            <el-card class="pageCard">
                <div class="cardTitle">监测模块及供应商</div>
                <el-form-item label="模块名称：">
                    <el-input v-model="pageData.companyName" class="inputs" placeholder="请输入传感器模块的名称"></el-input>
                    <span class="formItemsspan">*手动输入模块名称</span>
                </el-form-item>
                <el-form-item label="模块型号：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入传感器模块的型号"></el-input>
                    <span class="formItemsspan">*手动输入模块型号</span>
                </el-form-item>
                <el-form-item label="供应商名称：">
                    <div class="formItems">
                        <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请 从 供应商列表 中选择"></el-input>
                        <el-button type="primary" plain>查找</el-button>
                    </div>
                    <span class="formItemsspan">* 从供应商列表中选择</span>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">模块采用标准情况</div>
                <el-form-item label="标准号检索：">
                    <el-input v-model="pageData.companyName" class="inputs" placeholder="请输入传感器模块的名称"></el-input>
                    <el-button type="primary" plain>检索</el-button>
                    <span class="formItemsspan">*从标准资源库 中检索</span>
                </el-form-item>
                <el-form-item label="发布内容：">
                    <el-table :data="[{}]" class="tableheader meteorologicalenvironmentmsgtableheader" border align-center style="width: 100%">
                        <el-table-column prop="date" label="序号"></el-table-column>
                        <el-table-column prop="createTime" label="标准号" />
                        <el-table-column prop="companyName" label="标准名称" />
                        <el-table-column prop="createUserName" label="状态" />
                        <el-table-column prop="companyNature" label="发布日期" />
                        <el-table-column prop="companyNature" label="实施日期" />
                        <el-table-column prop="address" label="操作" width="160">
                            <template #default="scope">
                                <el-button type="primary" text bg>查看</el-button>
                                <el-button type="danger" text bg>删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table :data="[{}]" class="tableheader" border :show-header="false" style="width: 100%">
                        <el-table-column prop="date" label="序号"></el-table-column>
                        <el-table-column prop="createTime" label="标准号" />
                        <el-table-column prop="companyName" label="标准名称" />
                        <el-table-column prop="createUserName" label="状态" />
                        <el-table-column prop="companyNature" label="发布日期" />
                        <el-table-column prop="companyNature" label="实施日期" />
                        <el-table-column prop="address" label="操作" width="160">
                            <template #default="scope">
                                <div style="text-align: right">
                                    <el-button type="primary" text bg>加一行</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="formItemsspan">免责声明：本平台标准资料仅供参考，使用标准请以正式出版的标准版本为准</div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">传感模块信号类型</div>
                <el-form-item label="信号类型：">
                    <el-checkbox v-model="pageData.checked2">开关量</el-checkbox>
                    <el-checkbox v-model="pageData.checked2">模拟量</el-checkbox>
                    <el-checkbox v-model="pageData.checked2">RS485</el-checkbox>
                    <el-checkbox v-model="pageData.checked2">脉冲型</el-checkbox>
                    <span class="formItemsspan">*选择本设备入网通讯协议</span>
                </el-form-item>
                <el-form-item label="模拟量类型：">
                    <el-checkbox v-model="pageData.checked2">4~20mA</el-checkbox>
                    <el-checkbox v-model="pageData.checked2">0~5V</el-checkbox>
                    <el-checkbox v-model="pageData.checked2">0~10V</el-checkbox>
                    <el-checkbox v-model="pageData.checked2">线性映射</el-checkbox>
                    <span class="formItemsspan">*选择本设备入网接口协议</span>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">模块端口数量信息</div>
                <el-form-item label="模拟量输入AI：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入开关量输入的路数">
                        <template #append>路</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="开关量输出AO：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入开关量输出的路数">
                        <template #append>路</template>
                    </el-input>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">模块端口映射</div>
                <el-table :data="[{}]" class="tableheader meteorologicalenvironmentmsgtableheader" border align-center style="width: 100%">
                    <el-table-column prop="date" label="序号"></el-table-column>
                    <el-table-column prop="createTime" label="通道类型" />
                    <el-table-column prop="companyName" label="通道编号" />
                    <el-table-column prop="createUserName" label="通道名称" />
                    <el-table-column prop="companyNature" label="信号类型" />
                    <!-- 测量范围 -->
                    <el-table-column prop="address" label="测量范围">
                        <el-table-column prop="createTime" label="" width="40" />
                        <el-table-column prop="createTime" label="" width="40" />
                        <el-table-column prop="createTime" label="" width="40" />
                        <el-table-column prop="createTime" label="" width="40" />
                    </el-table-column>
                    <el-table-column prop="companyNature" label="单位" />
                    <el-table-column prop="companyNature" label="报警下限" />
                    <el-table-column prop="companyNature" label="报警上限" />
                    <el-table-column prop="address" label="操作" width="160">
                        <template #default="scope">
                            <el-button type="primary" text bg>上移</el-button>
                            <el-button type="danger" text bg>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="tableTip">说明：根据模块端口，自动生成端口映射表格</div>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">模块技术参数</div>
                <el-form-item label="测量精度：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入模块的 测量精度"> </el-input>
                </el-form-item>
                <el-form-item label="分辨率：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入模块的 分辨率"> </el-input>
                </el-form-item>
                <el-form-item label="供电电源：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入模块的供电电源"> </el-input>
                </el-form-item>
                <el-form-item label="模块功耗：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入模块的功耗">
                        <template #append>W</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="动态响应时间：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入模块的响应时间">
                        <template #append>秒</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="模块稳定性：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入模块的 稳定性">
                        <template #append>%/年</template>
                    </el-input>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">模块检验报告</div>
                <el-form-item label="发布内容：">
                    <el-table :data="[{}]" class="tableheader meteorologicalenvironmentmsgtableheader" border align-center style="width: 100%">
                        <el-table-column prop="date" label="序号"></el-table-column>
                        <el-table-column prop="createTime" label="标准号" />
                        <el-table-column prop="companyName" label="报告名称" />
                        <el-table-column prop="createUserName" label="检验报告单位" />
                        <el-table-column prop="companyNature" label="报告状态" />
                        <el-table-column prop="companyNature" label="检验日期" />
                        <el-table-column prop="companyNature" label="有效年限" />
                        <el-table-column prop="address" label="操作" width="160">
                            <template #default="scope">
                                <el-button type="primary" text bg>查看</el-button>
                                <el-button type="danger" text bg>删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table :data="[{}]" class="tableheader" border :show-header="false" style="width: 100%">
                        <el-table-column prop="date" label="序号"></el-table-column>
                        <el-table-column prop="createTime" label="标准号" />
                        <el-table-column prop="companyName" label="报告名称" />
                        <el-table-column prop="createUserName" label="检验报告单位" />
                        <el-table-column prop="companyNature" label="报告状态" />
                        <el-table-column prop="companyNature" label="检验日期" />
                        <el-table-column prop="companyNature" label="有效年限" />
                        <el-table-column prop="address" label="操作" width="160">
                            <template #default="scope">
                                <div style="text-align: right">
                                    <el-button type="primary" text bg>加一行</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="formItemsspan">免责声明：本平台标准资料仅供参考，使用标准请以正式出版的标准版本为准</div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">设备照片</div>
                <el-form-item label="">
                    <div>
                        <div class="uploadcertificate">
                            <div class="uploadcertificateItem">
                                <div class="uploadcertificateTitle">设备照片</div>
                                <el-image class="equipmentphoto" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
                            </div>
                            <div class="uploadcertificateItem">
                                <div class="uploadcertificateTitle">设备照片</div>
                                <el-image class="equipmentphoto" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
                            </div>
                            <div class="uploadcertificateItem">
                                <div class="uploadcertificateTitle">新增设备照片</div>
                                <uploadFile
                                    :fileUrl="pageData.cardHold"
                                    text="+新增设备照片"
                                    :showIcon="false"
                                    tableItem="cardHold"
                                    width="240px"
                                    height="150px"
                                ></uploadFile>
                            </div>
                        </div>
                        <div class="certificateInputTip">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">BIM建模信息</div>
                <el-form-item label="">
                    <div>
                        <div class="uploadcertificate">
                            <div class="uploadcertificateItem">
                                <div class="uploadcertificateTitle">三维BIM模型</div>
                                <el-image class="equipmentphoto" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
                            </div>
                            <div class="uploadcertificateItem">
                                <div class="uploadcertificateTitle">二维BIM模型</div>
                                <el-image class="equipmentphoto" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
                            </div>
                            <div class="uploadcertificateItem">
                                <div class="uploadcertificateTitle">其他BIM模型</div>
                                <uploadFile
                                    :fileUrl="pageData.cardHold"
                                    text="+其他BIM模型"
                                    :showIcon="false"
                                    tableItem="cardHold"
                                    width="240px"
                                    height="150px"
                                ></uploadFile>
                            </div>
                        </div>
                        <div class="certificateInputTip">● 上传的模型格式要求dwg/dxf、dwf、dng、IFC等格式，不超过10M。</div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">开放平台发布单位情况</div>
                <el-form-item label="模块发布单位：">
                    <div class="formItems">
                        <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请 从 供应商列表 中选择"></el-input>
                        <el-button type="primary" plain>选择</el-button>
                    </div>
                    <span class="formItemsspan">*从 我的团队 中选择</span>
                </el-form-item>
                <el-form-item label="标准公开程度：">
                    <div>
                        <el-radio-group v-model="pageData.createUserPost" size="large">
                            <div class="radiobutton" v-for="(item, index) in cardType" :key="index">
                                <el-radio-button :label="item" />
                            </div>
                        </el-radio-group>
                        <div class="formItemsspan">
                            *完全公开，所有人可以查看；部分公开，平台和提出的团队可以调用数据，其他人无权查看；不公开，自己查看，其他人无权查看
                        </div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">模块供应市场信息</div>
                <el-form-item label="计量单位：">
                    <el-input v-model="pageData.companyName" class="inputs" placeholder="请输入设备的计量单位"></el-input>
                    <span class="formItemsspan">*请输入设备的计量单位</span>
                </el-form-item>
                <el-form-item label="产品单价：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入设备的单价">
                        <template #append>元</template>
                    </el-input>
                    <span class="formItemsspan">*选填，仅用于成本计算，不作为报价用</span>
                </el-form-item>
                <el-form-item label="供应商设备网址：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入设备介绍网址"></el-input>
                    <span class="formItemsspan">*选填，仅用于材料采购用</span>
                </el-form-item>
                <el-form-item label="模块说明：">
                    <el-input
                        :rows="4"
                        type="textarea"
                        class="textarea"
                        resize="none"
                        v-model="pageData.companyPresentation"
                        placeholder="请输入模块介绍"
                    ></el-input>
                </el-form-item>
                <div class="subpageBtnBox">
                    <el-button type="primary" plain @click="router.back()">返回</el-button>
                    <el-button type="primary" plain>保存</el-button>
                </div>
            </el-card>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import mars3d from "@/components/mars3d.vue";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const pageData: any = ref({});
const addResskey: any = ref("");

const cardType = ref(["完全公开", "部分公开", "不公开"]);
const baseLatLng = ref([]);
const isAdd = ref(true);
const linkBtn = ref(true);
const cacheId = ref("");
const bigemapKey = ref(new Date().getTime());
const cacheData = (e: any) => {
    console.log(e);
};
const uploadFiles = (e: any, t: any) => {};
const uploadFileUrl = (e: any, t: any) => {};
const getAreaData = (e: any, t: any) => {};
</script>
<style lang="scss" scoped>
.pageCard {
    margin-bottom: 20px;
    .pageCardTitleBox {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .cardTitle {
        font-size: 16px;
        font-weight: bold;
        color: #252b3a;
        margin-bottom: 30px;
        width: 180px;
    }
    .cardTitletip {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
    }
    .inputs {
        width: 505px;
        margin-right: 10px;
    }
    // .pageBtns {
    //     padding-left: 130px;
    // }
    .formItemsspan {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        margin-left: 10px;
    }
    .certificateInputTip {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
    }
    .formitemtag {
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .selectBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .selectItem {
            width: 162px;
        }
    }
    .formitemtagspan {
        font-size: 12px;
        margin-top: -12px;
        color: #999999;
    }
    .formItemTipsBox {
        width: 747px;
        margin-right: 10px;
    }
    .certificateInputTips {
        font-size: 16px;
        font-weight: 400;
        color: #f11212;
        margin-top: 10px;
    }
    .addressinput {
        margin-top: 10px;
    }
    .uploadcertificate {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        margin-bottom: 10px;
        .uploadcertificateItem {
            margin-right: 30px;
            background-repeat: no-repeat;
            background-size: 154px 97px;
            background-position: 50% 70%;
            // &:nth-child(1) {
            //     background-image: url(@/assets/image/card2.png);
            // }
            // &:nth-child(2) {
            //     background-image: url(@/assets/image/card1.png);
            // }
            // &:nth-child(3) {
            //     background-image: url(@/assets/image/card3.png);
            // }
            .equipmentphoto {
                width: 240px;
                height: 150px;
            }
            .uploadcertificateTitle {
                text-align: center;
                font-size: 14px;
                color: #666666;
                margin-bottom: 10px;
            }
        }
    }
    .uploadcertificateItem1 {
        background-image: url(@/assets/image/team1.png);
        background-repeat: no-repeat;
        background-size: 154px 97px;
        background-position: 8% 53%;
        margin-bottom: 10px;
    }
    .mars3ds {
        width: 100%;
        height: 516px;
    }
}
.formitembox {
    width: 1017px;
    height: 165px;
    border: 1px solid #cccccc;
    .checkboxItem {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 7px;
        .checkboxItemName {
            font-size: 16px;
            margin-right: 50px;
            width: 170px;
            text-align: right;
        }
    }
}
.textarea {
    width: 1400px;
}
.itemsinputs {
    width: 60px;
    border: none;
    border-bottom: 1px solid #252b3a;
}
.tableTip {
    font-size: 12px;
    color: #ff0000;
    margin-top: 20px;
}
</style>
<style>
.meteorologicalenvironmentmsg .el-checkbox {
    min-width: 125px;
    margin-right: 20px;
}
.meteorologicalenvironmentmsgtableheader .el-table__header .is-group tr:last-child {
    display: none;
}
.meteorologicalenvironmentmsg .radiobutton {
    width: 162px;
    height: 30px;
    border-radius: 4px;
    margin-right: 10px;
}
.meteorologicalenvironmentmsg .radiobutton .el-radio-button .el-radio-button__inner {
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;
    width: 162px;
    border: none;
    background: #f1f1f1;
}
.meteorologicalenvironmentmsg .radiobutton .el-radio-button.is-active .el-radio-button__inner {
    background: #23b14d;
}
</style>
